Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Input, Dropdown components #8

Merged
merged 1 commit into from
Apr 9, 2024
Merged

Feat: Input, Dropdown components #8

merged 1 commit into from
Apr 9, 2024

Conversation

MEGUMMY1
Copy link
Member

@MEGUMMY1 MEGUMMY1 commented Apr 9, 2024

#️⃣연관된 이슈

#6

📝작업 내용

  • Input, Dropdown components 생성

📸스크린샷

image


💬리뷰 요구사항

Input이나 Dropdown 필요하실 때 사용하시면 됩니다.

className={styles.option}
onClick={() => handleOptionClick(option.value)}
>
{option.label}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

li는 클릭 가능한 요소가 아니라서 onClick을 넣는 것은 접근성 위배입니다. li태그 하위에 button태그를 추가해서 onClick을 추가하는 방식으로 사용해주세요!

className={styles.dropdown_icon}
width={15}
height={15}
alt="dropdown icon"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 alt는 비워두셔도 됩니다!

<div className={styles.dropdown} onClick={toggleDropdown}>
<span>{value}</span>
<img
src={isOpen ? topIcon : downIcon}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스명에 -open 클래스를 추가하고 css로 rotate를 하면 이미지 한개로만 작업할 수 있겠죠?


return (
<div className={styles.dropdown_wrapper}>
<div className={styles.dropdown} onClick={toggleDropdown}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기서도 div에 onClick을 사용하면 접근성 위배입니다!
div에서 onClick을 사용해야한다면 role="button" 추가 및 onKeydown , tabIndex 추가해주어야 합니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants